<template>
	<div class="table-container">
		<div v-loading="loading">
			<Table
				:columns="columns"
				:data="data"
				:beforeColunm="beforeColunm"
				v-bind="TableProps"
				:tableHeight="tableHeight"
			/>
		</div>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="pageValue"
			background
			:current-page="pageNum"
			:page-size="pageSize"
			:page-sizes="$store.getters.pageSizes"
			:total="total"
			:pager-count="9"
			layout="total, sizes,prev, pager, next, jumper"
			@current-change="onCurrentChange"
			@size-change="onSizeChange"
		></el-pagination>
		<!-- table弹框容器 -->
		<div class="table-container-dialogs">
			<slot />
		</div>
	</div>
</template>

<script>
import Table from '../Table'
// 导出manager
export { manager, initTableProps } from './utils'
export { default as TableColumns } from '../TableColumns'

export default {
	name: 'TableContainer',
	components: {
		Table
	},
	props: {
		loading: {
			type: Boolean,
			default: false
		},
		data: {
			type: Array,
			default: () => []
		},
		columns: {
			type: Array,
			default: () => []
		},
		total: {
			type: Number,
			default: 0
		},
		pageNum: {
			type: Number,
			default: 0
		},
		pageSize: {
			type: Number,
			default: 0
		},
		beforeColunm: {
			type: Function,
			default: undefined
		},
		onSizeChange: {
			type: Function,
			default: () => {}
		},
		onCurrentChange: {
			type: Function,
			default: () => {}
		},
		// eslint-disable-next-line vue/prop-name-casing
		TableProps: {
			type: Object,
			default: () => ({})
		},
		tableHeight: {
			type: String | Number,
			default: 480
		}
	}
}
</script>
